<template>
	<view style="padding-bottom: 120rpx;">
		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">借调信息</text>
			</view>
			<view class="contentBox">
				<block v-if="detailInfo.secondedType == 1">
					<view class="textItem">
						<text>订单号</text>
						<text style="color: #333;">{{ detailInfo.orderNo | filterNull }}</text>
					</view>
					<view class="textItem">
						<text>车型信息</text>
						<text style="color: #333;">{{ detailInfo.modelName|filterNull }}</text>
					</view>
					<view class="textItem">
						<text style="width: 200rpx;">租赁时间</text>
						<text
							style="color: #333;">{{ detailInfo.rentalStartTime }}至{{ detailInfo.rentalEndTime }}</text>
					</view>
				</block>

				<view class="textItem">
					<text>借调同行</text>
					<text style="color: #333;">{{ detailInfo.sameJobName|filterNull }}</text>
				</view>
				<view class="textItem">
					<text>车牌号</text>
					<text style="color: #333;">{{ detailInfo.carNo|filterNull }}</text>
				</view>
				<view class="textItem" v-if="detailInfo.secondedType==1">
					<text>车架号</text>
					<text style="color: #333;">{{ detailInfo.vinNo|filterNull }}</text>
				</view>
				<view class="textItem">
					<text>借调开始日期</text>
					<text style="color: #333;">{{ detailInfo.startTime| filterNull }}</text>
				</view>
				<view class="textItem">
					<text>预约借调结束日期</text>
					<text style="color: #333;">{{ detailInfo.estimateEndTime| filterNull }}</text>
				</view>
				<view class="textItem">
					<text>预约借调天数</text>
					<text v-if="detailInfo.estimateDay"
						style="color: #333;">{{ detailInfo.estimateDay|filterNull }}天</text>
					<text v-else style="color: #333;">--</text>
				</view>
				<view v-if="detailInfo.secondedType == 1" class="textItem">
					<text>借调单价</text>
					<text v-if="detailInfo.secondedUnitPrice"
						style="color: #333;">{{ detailInfo.secondedUnitPrice|filterNull }}元/天</text>
					<text v-else style="color: #333;">--</text>
				</view>
			<!-- 	<view class="textItem">
					<text>借调费用</text>
					<text v-if="oldTotalRent" style="color: #333;">¥{{ oldTotalRent}}</text>
					<text v-else style="color: #333;">--</text>
				</view> -->
			<!-- 	<view class="textItem" v-if="detailInfo.secondedType == 2 && detailInfo.carSource == 6">
					<text>托管费用</text>
					<text style="color: #333;">¥{{ detailInfo.hostingFees|filterNull}}</text>
				</view> -->
				<view class="textItem">
					<text>结算方式</text>
					<text style="color: #333;">{{ detailInfo.settlementWay|settlementWay }}</text>
				</view>
				<view class="textItem">
					<text>借调备注</text>
					<text style="color: #333;">{{ detailInfo.remark|filterNull }}</text>
				</view>
				<view class="textItem" style="flex-direction: column;align-items: flex-start;">
					<text style="margin-bottom: 16rpx;">车辆初始化图片</text>
					<u-album :urls="url1">
					</u-album>
				</view>

			</view>
		</view>
		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">结束借调</text>
			</view>
			<view class="contentBox">
				<uni-forms ref="secondedForm" :rules="rules" :modelValue="detailInfo">
					<uni-forms-item label="实际结束日期" labelWidth="100" required name="actualEndTime">
						<uni-datetime-picker v-model="detailInfo.actualEndTime" @change="changeTime"
							:start="detailInfo.startTime" />
					</uni-forms-item>

					<uni-forms-item label="借调天数" labelWidth="100" required name="actualDay">
						<view>
							<u--input v-model.number="detailInfo.actualDay" placeholder="请输入借调天数"
								disabledColor="#fff"></u--input>
						</view>
					</uni-forms-item>

					<template v-if="detailInfo.secondedType==1">
						<uni-forms-item label="借调单价" labelWidth="100" name="secondedUnitPrice">
							<view>
								<u--input v-model="detailInfo.secondedUnitPrice" disabled @input="check" type="digit"
									placeholder="请输入借调单价"></u--input>
							</view>
						</uni-forms-item>
					</template>


					<uni-forms-item label="借调费用" labelWidth="100" required name="totalRent">
						<view>
							<u--input v-model="detailInfo.totalRent" @input="check" type="digit"
								placeholder="请输入借调费用"></u--input>
						</view>
					</uni-forms-item>

					<template v-if="detailInfo.carSource==6 && detailInfo.secondedType==2">
						<uni-forms-item label="托管费用" labelWidth="100" required name="hostingFees">
							<view>
								<u--input v-model="detailInfo.hostingFees" @input="check1" type="digit"
									placeholder="请输入托管费用"></u--input>
							</view>
						</uni-forms-item>
					</template>


					<uni-forms-item label="借调结束图片" labelPosition="top" labelWidth="300">
						<sr-upload maxCount="20" @uploadResult="uploadCar"></sr-upload>
					</uni-forms-item>

					<uni-forms-item label="备注" labelPosition="top">
						<view>
							<u--textarea v-model="detailInfo.endRemark" placeholder="请输入200字以内的内容" count
								maxlength="200">
							</u--textarea>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>

		<button type="info" class="sub-btn" @click="confimFinish">确认</button>

	</view>
</template>

<script>
	import * as secondedApi from '@/api/seconded-api.js';
	import settings from '@/settings.js'
	import srUpload from '@/components/upload/sr-upload.vue'

	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				url1: [],
				id: '',
				detailInfo: {},
				oldTotalRent:null,
				rules: {
					actualEndTime: {
						rules: [{
							required: true,
							errorMessage: '请选择实际结束时间'
						}]
					},
					actualDay: {
						rules: [{
							required: true,
							errorMessage: '借调天数不能为空'
						}]
					},
					totalRent: {
						rules: [{
							required: true,
							errorMessage: '借调费用不能为空'
						}]
					},
					hostingFees: {
						rules: [{
							required: true,
							errorMessage: '托管费用不能为空'
						}]
					}
				}
			}
		},
		watch: {
			'detailInfo.actualDay': {
				handler(value) {
					if (this.detailInfo.actualDay && this.detailInfo.secondedUnitPrice && this.detailInfo.secondedType ==
						1) {
						const secondedUnitPrice = Number(this.detailInfo.secondedUnitPrice)
						const actualDay = Number(this.detailInfo.actualDay)
						this.detailInfo.totalRent = secondedUnitPrice * actualDay
					}
				},
				// immediate:true,
				deep: true
			},
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.secondedForm.setRules(this.rules)
		},
		onLoad(op) {
			this.id = op.id;
			this.getSecondedDetail();
		},
		methods: {
			getSecondedDetail() {
				secondedApi.secondedDetail(this.id).then(res => {
					this.detailInfo = res.data;
					// this.detailInfo.amount = this.detailInfo.totalRent;
					this.oldTotalRent = this.detailInfo.totalRent;
					this.detailInfo.actualEndTime = this.detailInfo.estimateEndTime;
					if (this.detailInfo.actualDay == null) {
						this.detailInfo.actualDay = this.detailInfo.estimateDay;
					}
					this.detailInfo.endRemark = '';
					if (!uni.$u.test.isEmpty(this.detailInfo.initialPicture)) {
						this.url1 = this.detailInfo.initialPicture.map(url => {
							return settings.baseImageUrl + url
						})
					}
				});
			},
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.detailInfo.totalRent = e;
				})
			},
			check1(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.detailInfo.hostingFees = e;
				})
			},
			changeTime(e) {
				var m1 = moment(this.detailInfo.startTime);
				var m2 = moment(e);
				this.detailInfo.actualDay = m2.diff(m1, 'days');
			},
			uploadCar(data) {
				this.detailInfo.endPicture = data;
			},
			confimFinish() {
				this.$refs.secondedForm.validate().then(res => {
					if(!this.$u.test.isEmpty(this.detailInfo.actualEndTime)){
						this.detailInfo.actualEndTime = moment(this.detailInfo.actualEndTime).format('YYYY-MM-DD HH:mm:ss')
					}
					secondedApi.endSeconded(this.detailInfo).then(res => {
						if (res.code == 200) {
							uni.$emit("refreshSecondedList");
							this.$u.toast('借调结束')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			}
		}
	}
</script>

<style lang="scss" scoped>

</style>